<template>
  <header>
    <slot name="left"></slot>
    <div class="title">{{ title }}</div>
    <slot name="right"></slot>
  </header>
</template>

<script>
export default {
  name: 'NavHeader',
  props: ['title'],
  data () {
    return {

    }
  },

  mounted () {

  },

  methods: {

  }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/common/stylus/mixins.styl'
header
  width 100%
  position fixed
  height 80px
  line-height 80px
  background-color $green
  padding 0 10px
  box-sizing border-box
  z-index 99
  .title
    position absolute
    left 50%
    transform translateX(-50%)
    color #fff
    white-space nowrap
    text-overflow ellipsis
    overflow hidden
    font-size 20px
  .header-left
    width 80px
    float left
    .ico
      font-size 18px
      color #fff
  .header-right
    float right
    .ico1
      font-size 18px
      color #fff
</style>
